import { Component } from 'react'
import { ScrollView, View, Image } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import Taro from '@tarojs/taro'
import { AtActivityIndicator } from 'taro-ui'
import cls from 'classnames';
import emptyImg from '../../resource/home-empty.png';
import './index.less'

const PAGE_SIZE = 5;

@inject('store')
@observer
class Home extends Component {

  state = {
    loading: false,
    hasMore: true,
    page: 1,
    datasource: [],
    active: 1,
    total: -1,
  }

  componentWillMount () {

  }

  componentDidMount () { 
    this.getPageData({ page: 1 });
  }

  getPageData = async ({ page }) => {
    if (this.state.loading) {
      return;
    }
    this.setState({
      loading: true,
    })
    const { success, data } = await Taro.request({
      method: 'post',
      url: '/api/account/newest/list',
      data: {
        page,
        pageSize: PAGE_SIZE,
        day: this.state.active
      }
    })
    if (success) {
      const { records, total, pages, current } = data;

      this.setState({
        hasMore: current !== pages,
        page: current,
        total,
        datasource: page === 1 ? records : [...this.state.datasource, ...records],
      })
    }

    this.setState({
      loading: false,
    })
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  onScrollToUpper = (e) => {
    this.setState({
      hasMore: true
    })
    console.log("onScrollToUpper", e);
    this.getPageData({ page: 1 })
  }

  onScroll = (e) => {
    console.log("onScroll", e);
  }

  onScrollToLower = (e) => {
    console.log("onScrollToLower", e);
    if (!this.state.hasMore) {
      return;
    }
    this.getPageData({
      page: this.state.page + 1
    })
  }

  linkToAccountDetail = (item) => {
    Taro.navigateTo({
      url: `/pages/accountDetail/index?id=${item.id}`,
    })
  }

  onAcitveChange = (day) => {
    this.setState({
      active: day,
      hasMore: true,
      page: 1,
      total: -1,
      datasource: [],
    }, () => {
      this.getPageData({ page: 1 })
    })
  }

  render () {
    const { loading, datasource, active, total } = this.state
    console.log(this.state.datasource, 88888)

    return (
      <View className='home-page'>
        <ScrollView
          className='home-page-scroll'
          scrollY
          scrollWithAnimation
          scrollTop={0}
          lowerThreshold={30}
          upperThreshold={30}
          onScrollToUpper={this.onScrollToUpper} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
          onScrollToLower={this.onScrollToLower}
        >
          <View>
            <View className='filter'>
              <View
                className={cls('filter-item', {
                  active: active == 1
                })}
                onClick={() => this.onAcitveChange(1)}
              >
                今日新增
              </View>
              <View
                className={cls('filter-item', {
                  active: active == 7
                })}

                onClick={() => this.onAcitveChange(7)}
              >
                7日新增
              </View>
            </View>
            {total == 0 &&
              <View className='empty'>
                <Image
                  src={emptyImg}
                  mode="aspectFill"
                  className='empty-img'
                />
  
                <View className='empty-text'>暂无数据</View>
              </View>
            }
            {total !== 0 &&
              <View>
                <View className='card-list'>
                  {datasource.map((item, index) => {
                    const { id, avatar, nickName, occupation, education, birthday } = item
                    const year = birthday.slice(0, 4)
                    return (
                      <View
                        className='card-list-item'
                        key={id}
                        onClick={() => this.linkToAccountDetail(item)}
                      >
                        <Image
                          className={'card-list-item-avatar'}
                          mode="aspectFill"
                          src={avatar}
                        />
                        <View className='card-list-item-content'>
                          <View className='header'>
                            <View className='header-item'>
                              {nickName}
                            </View>
                            <View className='header-item'>
                              {year}
                            </View>
                          </View>
                          <View className='content'>
                            <View className='content-item'>
                              {occupation}
                            </View>
                            <View className='content-item'>
                              {education}
                            </View>
                          </View>
                          {/* <View>{item.workAreaCity}</View>
                          <View>身高: {item.height}</View>
                          <View>职业: {item.occupation}</View> */}
                        </View>
                      </View>
                    )
                  })}
                </View>
                {loading && total !== -1 &&
                  <AtActivityIndicator content='加载中...'></AtActivityIndicator>
                }
              </View>
            }
          </View>
        </ScrollView>
      </View>
    )
  }
}

export default Home
